<template>
    <el-dialog
      :title="!dataForm.id ? '详情' : '详情'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="160px"
      >
      <el-form-item label="标题:">
        <div>{{dataForm.name}}</div>
      </el-form-item>
      <el-form-item label="跳转地址:">
        <div>{{dataForm.url}}</div>
      </el-form-item>
      <el-form-item label="首页是否展示:">
        <div v-if="dataForm.sfzs == 1">展示</div>
        <div v-if="dataForm.sfzs == 0">不展示</div>
      </el-form-item>
      <el-form-item label="简介:">
        <div>{{dataForm.jj}}</div>
      </el-form-item>
      <el-form-item label="封面:">
          <img width="100%" :src="'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/' + dataForm.phone" alt="">
      </el-form-item>
      <el-form-item label="内容:">
        <!-- <div>{{dataForm.text}}</div> -->
        <div v-html="dataForm.text"></div>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <!-- <el-button type="primary" @click="visible = false">确定</el-button> -->
      </span>
    </el-dialog>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageUrl: '',
        visible: false,
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        dataForm: {
          id: "",
          wldh: ""
        },
      };
    },
    methods: {
      init(id) {
        this.dataForm.id = id;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(
                `sys/ywgl/info?id=${this.dataForm.id}`
              ),
              method: "get",
              params: this.$http.adornParams()
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm = data.ywgl;
                var richtext= data.ywgl.text;
                const regex = new RegExp('<img', 'gi');
                richtext= this.dataForm.text.replace(regex, `<img style="max-width: 100%;"`)
                this.dataForm.text = richtext;
              }
            });
          }
        });
      },
    },
  };
  </script>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>